<template>
  <div class="box">
    <el-container class="page">
      <el-aside width="200px">
        <el-menu
          unique-opened
          default-active="1-1"
          class="el-menu-vertical-demo"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <!-- 动态侧边栏 -->
          <div v-for="item in userInfo.menus" :key="item.id">
            <!-- 遍历目录 -->
            <el-submenu v-if="item.children" :index="item.id + ''">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="i in item.children"
                  :key="i.id"
                  :index="i.url"
                  >{{ i.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <!-- 遍历菜单 -->
            <el-menu-item v-else :index="item.url">
              <i class="el-icon-s-promotion"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <span>{{ userInfo.username }}</span>
          <el-button @click="logout">退出登录</el-button>
        </el-header>
        <el-main>

          <!-- 面包屑组件和mate属性 -->
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.meta.title">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 二级路由出口 -->
          <router-view class="second-con"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
    computed:{
      ...mapGetters({
        userInfo:"userInfo",
      })
    },
  methods:{
    ...mapActions({
      changeUserInfo:"changeUserInfo",
    }),
    logout(){
      this.changeUserInfo({});
      this.$router.push("/login")
    }
  }
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
.box {
  width: 100vw;
  height: 100vh;
}
.el-aside {
  background:#0000AA;
}
.el-header {
  // text-align: center;
  padding: @margin;
  height: 30px;
  background: @light1;
  color: #fff;
}
.el-main {
  background: #fff;
}
.el-breadcrumb{
  margin: @padding 0;
}
.page {
  height: 100vh;
}
/deep/.el-menu,
.el-submenu,
/deep/.el-menu-item:focus,
/deep/.el-menu-item:hover,
/deep/.el-submenu__title:focus,
/deep/ .el-submenu__title:hover {
  background: #0000AA !important;
}
.second-con {
  padding-top: @padding;
}
</style>